<template>
  <div class="form-designer-header">
    <div class="form-designer-header-top">
      <div class="form-designer-header-top-left">
        <div class="edit-icon">
          <SvgTextboxLine viewBox="0 0 24 24" />
        </div>
        <div class="space-between"></div>
        <div class="edit-icon">
          <SvgBackLine viewBox="0 0 24 24" />
        </div>
        <div class="edit-icon">
          <SvgForwardLine viewBox="0 0 24 24" />
        </div>
        <div class="space-between"></div>
        <div class="edit-icon">
          <SvgCombineLine viewBox="0 0 24 24" />
        </div>
        <div class="edit-icon">
          <SvgExcludeLine viewBox="0 0 24 24" />
        </div>
        <div class="space-between"></div>
        <div class="edit-icon">
          <SvgCodeLine viewBox="0 0 24 24" />
        </div>
        <div class="space-between"></div>
        <div class="edit-icon" @click="toggleWordImport" :class="{ active: showWordImport }" title="Word导入">
          <SvgDocumentLine viewBox="0 0 24 24" />
        </div>
      </div>
      <div class="form-designer-header-top-right">
        <div class="edit-icon">
          <SvgPlayCircleLine viewBox="0 0 24 24" />
        </div>
        <div class="space-between"></div>
        <div class="edit-icon">
          <SvgShareForwardLine viewBox="0 0 24 24" />
        </div>
      </div>
    </div>
    <div class="form-designer-header-sub">
      <el-select v-model="fontFamily" style="width: 90px;margin-right: 5px;">
        <el-option v-for="item in fontFamilyList" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="fontStyle" style="width: 90px;margin-right: 5px;">
        <el-option label="标准" value="normal" />
        <el-option label="斜体" value="italic" />
        <el-option label="加粗" value="bold" />
      </el-select>
      <el-select v-model="fontSize" style="width: 70px;margin-right: 5px;">
        <el-option label="12" value="12" />
        <el-option label="13" value="13" />
        <el-option label="14" value="14" />
        <el-option label="15" value="15" />
        <el-option label="16" value="16" />
        <el-option label="17" value="17" />
        <el-option label="18" value="18" />
        <el-option label="19" value="19" />
        <el-option label="20" value="20" />
      </el-select>
      <el-divider direction="vertical" />
      <div class="edit-icon">
        <SvgTextColorLine viewBox="0 0 24 24" />
      </div>
      <div class="edit-icon">
        <SvgBoldLine viewBox="0 0 24 24" />
      </div>
      <div class="edit-icon">
        <SvgItalicLine viewBox="0 0 24 24" />
      </div>
      <div class="edit-icon">
        <SvgUnderlineLine viewBox="0 0 24 24" />
      </div>
      <el-divider direction="vertical" />
      <div class="edit-icon">
        <SvgAlignLeftLine viewBox="0 0 24 24" />
      </div>
      <div class="edit-icon">
        <SvgAlignHorizontalCenterLine viewBox="0 0 24 24" />
      </div>
      <div class="edit-icon">
        <SvgAlignRightLine viewBox="0 0 24 24" />
      </div>
      <div class="edit-icon">
        <SvgAlignTopLine viewBox="0 0 24 24" />
      </div>
      <div class="edit-icon">
        <SvgAlignVerticalCenterLine viewBox="0 0 24 24" />
      </div>
      <div class="edit-icon">
        <SvgAlignBottomLine viewBox="0 0 24 24" />
      </div>
      <el-divider direction="vertical" />
      <div class="edit-icon">
        <SvgBorderBlankLine viewBox="0 0 24 24" />
      </div>
      <div class="edit-icon">
        <SvgDividingLine viewBox="0 0 24 24" />
      </div>
      <el-divider direction="vertical" />
      <div class="attr-edit">
        x <el-input style="width: 60px;"></el-input>
      </div>
      <div class="attr-edit">
        y <el-input style="width: 60px;"></el-input>
      </div>
      <div class="attr-edit">
        w <el-input style="width: 60px;"></el-input>
      </div>
      <SvgUnlockLine @click="lock = false" v-if="lock" style="transform: scale(0.6);" viewBox="0 0 24 24" />
      <SvgLockLine @click="lock = true" v-else style="transform: scale(0.6);" viewBox="0 0 24 24" />
      <div class="attr-edit">
        h <el-input style="width: 60px;"></el-input>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

// 定义事件
const emit = defineEmits<{
  toggleWordImport: []
}>()

// Word导入状态
const showWordImport = ref(false)


// 切换Word导入面板
const toggleWordImport = () => {
  showWordImport.value = !showWordImport.value
  emit('toggleWordImport')
}

import SvgAlignBottomLine from '@/assets/svg/align_bottom_line.svg'
import SvgAlignHorizontalCenterLine from '@/assets/svg/align_horizontal_center_line.svg'
import SvgAlignLeftLine from '@/assets/svg/align_left_2_line.svg'
import SvgAlignRightLine from '@/assets/svg/align_right_2_line.svg'
import SvgAlignTopLine from '@/assets/svg/align_top_line.svg'
import SvgAlignVerticalCenterLine from '@/assets/svg/align_vertical_center_line.svg'
import SvgTextColorLine from '@/assets/svg/text_color_line.svg'
import SvgBoldLine from '@/assets/svg/bold_line.svg'
import SvgItalicLine from '@/assets/svg/italic_line.svg'
import SvgUnderlineLine from '@/assets/svg/underline_line.svg'
import SvgBorderBlankLine from '@/assets/svg/border_blank_line.svg'
import SvgCodeLine from '@/assets/svg/code_line.svg'
import SvgCombineLine from '@/assets/svg/combine_line.svg'
import SvgForwardLine from '@/assets/svg/forward_line.svg'
import SvgBackLine from '@/assets/svg/back_line.svg'
import SvgExcludeLine from '@/assets/svg/exclude_line.svg'
import SvgDividingLine from '@/assets/svg/dividing_line.svg'
import SvgTextboxLine from '@/assets/svg/textbox_line.svg'
import SvgLockLine from '@/assets/svg/lock_line.svg'
import SvgUnlockLine from '@/assets/svg/unlock_line.svg'
import SvgPlayCircleLine from '@/assets/svg/play_circle_line.svg'
import SvgShareForwardLine from '@/assets/svg/share_forward_line.svg'
import SvgDocumentLine from '@/assets/svg/document_line.svg'

const fontFamily = ref('宋体');
const fontFamilyList = ref(['宋体', '黑体', '楷体', '仿宋']);
const lock = ref(false);
const fontStyle = ref('normal');
const fontSize = ref('12');
</script>
<style scoped lang="scss">
.iconfont {
  font-size: 20px;
}

.edit-icon {
  padding: 4px;
  border-radius: 5px;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
    background: rgba($color: #000000, $alpha: 0.1);
  }

  &.active {
    background: rgba($color: #409eff, $alpha: 0.2);
    color: #409eff;
  }
}

.form-designer-header {
  height: 115px;
  user-select: none;

  &-top {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;

    &-left {
      flex: 1;
      display: flex;
    }

    &-right {
      width: 300px;
      display: flex;
    }



    .space-between {
      width: 50px;
    }

  }

  &-sub {
    background: #F3F8FF;
    height: 45px;
    display: flex;
    align-items: center;
    padding: 0 10px;

    .attr-edit {
      margin-right: 5px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
  }
}
</style>
